<template>
  <div :style="{height: wHeight, width: mainWidth}">
    <el-container>
      <el-header style="padding: 0px">
        <div id="mainHeader" style="display: flex">
          <div style="margin-left: 20px; margin-right: 30px">
            <a href="/sdgp/" style="text-decoration: none; color: #4d4d4d">
              <p style="font-weight: bold; font-size: 20px; font-family: 华文彩云; cursor: pointer; letter-spacing: 5px">模拟数据生成平台</p>
            </a>
          </div>
          <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" style="background-color: #94e0e0;" :router="true" >
            <el-menu-item index="generate" class="menuItemStyle" style="color: #9e7012">数据生成</el-menu-item>
            <el-menu-item index="wordsCenter" class="menuItemStyle" style="color: #9e7012">词库中心</el-menu-item>
            <el-menu-item index="myWords" class="menuItemStyle" style="color: #9e7012">我的词库</el-menu-item>
<!--            <el-menu-item index="home" class="menuItemStyle" style="color: #9e7012">个人中心</el-menu-item>-->
          </el-menu>
          <div id="logout" @click="logout()" v-show="showBtn">
            <span>退出登录</span>
          </div>
        </div>
      </el-header>
      <el-main style="padding: 0px;" :style="{height: mainHeight, width: mainWidth}" >
        <div id="mainMain" style="min-width: 1200px; height: 100%">
          <router-view/>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "MainPage",
  data(){
    return {
      activeIndex: "generate",
      mainHeight: (innerHeight < 937 ? 877 : innerHeight - 60) + 'px',
      mainWidth: (innerWidth < 1450 ? 1450 : innerWidth) + 'px',
      wHeight: (innerHeight < 937 ? 937 : innerHeight) + 'px',
      showBtn: sessionStorage['authorization'] !== undefined,
    }
  },
  methods:{
    handleSelect(){
    },
    logout(){
      sessionStorage.removeItem("authorization");
      this.$router.replace("/");
    }
  },
  beforeMount() {
    let url = document.URL;
    if(url.indexOf("generate") != -1){
      this.activeIndex = "generate"
    }else if(url.indexOf("wordsCenter") != -1){
      this.activeIndex = "wordsCenter"
    }else if(url.indexOf("myWords") != -1){
      this.activeIndex = "myWords"
    }else if(url.indexOf("home") != -1){
      this.activeIndex = "home"
    }
  },
  beforeCreate() {
    window.onresize = ()=>{
      this.mainHeight = (innerHeight < 937 ? 877 : innerHeight - 60) + 'px';
      this.mainWidth = (innerWidth < 1450 ? 1450 : innerWidth) + 'px';
      this.wHeight = (innerHeight < 937 ? 937 : innerHeight) + 'px';
    }
  }
}
</script>

<style scoped>
#mainHeader{
  background-color: #94e0e0;
  width: 100%;
}
#mainMain{
  background-color: #e8f6f6;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.menuItemStyle{
  font-size: 1.1em;
  font-weight: bold;
  font-family: 幼圆
}
#logout{
  margin-right: 20px!important;
  margin-top: 10px;
  margin-left: auto;
  width: 100px;
  height: 40px;
  line-height: 40px;
  color: #8a8a8a;
  text-align: center;
  border-radius: 10px;
  cursor: pointer;
}
#logout:hover{
  box-shadow: #959595 2px 2px 5px;
  color: #cd3f3f;
}
</style>
<style>
#mainHeader .el-menu-item:hover{
  background-color: #caf3f3;
}
</style>